import { postUsersLogin } from '@/services/bankend/userController';
import { LockOutlined, UserOutlined } from '@ant-design/icons';
import {
  LoginForm,
  ProConfigProvider,
  ProFormText,
} from '@ant-design/pro-components';
import { Button, message } from 'antd';

const mainFont = `'Segoe UI', 'PingFang SC', 'Microsoft YaHei', Arial, sans-serif`;

export default function LoginPage() {
  return (
    <ProConfigProvider hashed={false}>
      <div
        style={{
          minHeight: '100vh',
          width: '100vw',
          background: '#f3f6fb',
          display: 'flex',
          justifyContent: 'center',
          alignItems: 'center',
          fontFamily: mainFont,
          position: 'relative',
        }}
      >
        {/* 背景装饰圆形 */}
        <svg
          className="login-bg-svg-1"
          width="400"
          height="400"
          style={{
            position: 'absolute',
            left: 0,
            top: 0,
            zIndex: 0,
            opacity: 0.13,
          }}
        >
          <circle cx="200" cy="200" r="180" fill="#90caf9" />
        </svg>
        <svg
          className="login-bg-svg-2"
          width="300"
          height="300"
          style={{
            position: 'absolute',
            right: 0,
            bottom: 0,
            zIndex: 0,
            opacity: 0.1,
          }}
        >
          <circle cx="150" cy="150" r="140" fill="#1976d2" />
        </svg>
        {/* 卡片分栏 */}
        <div
          className="login-card"
          style={{
            width: 800,
            maxWidth: '98vw',
            minHeight: 420,
            background: '#fff',
            borderRadius: 28,
            boxShadow: '0 8px 32px 0 rgba(21,101,192,0.10)',
            display: 'flex',
            overflow: 'hidden',
            zIndex: 1,
          }}
        >
          {/* 左侧欢迎区 */}
          <div
            className="login-welcome"
            style={{
              flex: 1.1,
              background: 'linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%)',
              display: 'flex',
              flexDirection: 'column',
              alignItems: 'center',
              justifyContent: 'center',
              padding: '40px 24px',
              borderRight: '1px solid #e3eaf2',
              position: 'relative',
            }}
          >
            <div
              style={{
                fontWeight: 800,
                fontSize: 32,
                color: '#174ea6',
                letterSpacing: 2,
                marginBottom: 12,
                fontFamily: mainFont,
              }}
            >
              欢迎登录！
            </div>
            <div
              style={{
                color: '#1976d2',
                fontSize: 17,
                opacity: 0.85,
                marginBottom: 32,
                fontFamily: mainFont,
                fontWeight: 500,
              }}
            >
              大学生成果管理平台
            </div>
            <div
              style={{
                color: '#789',
                fontSize: 15,
                lineHeight: 1.7,
                textAlign: 'center',
                maxWidth: 260,
              }}
            >
              管理你的学业成果，提升自我价值，迈向更高目标。
            </div>
            {/* 装饰弧形 */}
            <svg
              className="login-welcome-ellipse"
              width="120"
              height="60"
              style={{
                position: 'absolute',
                left: 10,
                bottom: 10,
                opacity: 0.12,
              }}
            >
              <ellipse cx="60" cy="50" rx="55" ry="18" fill="#1976d2" />
            </svg>
          </div>
          {/* 右侧登录表单区 */}
          <div
            className="login-form-side"
            style={{
              flex: 1,
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
              padding: '40px 32px',
              background: '#fff',
            }}
          >
            <LoginForm
              title={
                <span
                  style={{
                    fontWeight: 700,
                    fontSize: 26,
                    color: '#174ea6',
                    letterSpacing: 1,
                    fontFamily: mainFont,
                  }}
                >
                  大学生成果管理平台
                </span>
              }
              subTitle={
                <span
                  style={{
                    color: '#1976d2',
                    fontSize: 16,
                    fontWeight: 500,
                    fontFamily: mainFont,
                    opacity: 0.85,
                    letterSpacing: 1,
                  }}
                >
                  请登录以继续
                </span>
              }
              contentStyle={{
                width: '100%',
                textAlign: 'center',
                fontFamily: mainFont,
              }}
              style={{
                width: 320,
                maxWidth: '90vw',
                padding: 0,
                borderRadius: 18,
                boxShadow: 'none',
                background: 'transparent',
                fontFamily: mainFont,
              }}
              onFinish={async (values) => {
                const { data, code } = await postUsersLogin({
                  username: values.username,
                  password: values.password,
                });
                if (code === 0 && data) {
                  console.log('登录成功，后端返回token：', data);
                  localStorage.setItem('zxin-award-token', data);
                  message.success('登录成功');
                  window.location.href = '/';
                } else {
                  message.error('登录失败');
                }
              }}
              submitter={{
                render: () => (
                  <Button
                    type="primary"
                    htmlType="submit"
                    style={{
                      width: '100%',
                      height: 44,
                      borderRadius: 22,
                      background:
                        'linear-gradient(90deg, #1976d2 0%, #64b5f6 100%)',
                      fontWeight: 700,
                      fontSize: 18,
                      fontFamily: mainFont,
                      boxShadow: '0 2px 8px #1976d233',
                      border: 'none',
                      transition: 'filter 0.2s',
                    }}
                    onMouseOver={(e) =>
                      (e.currentTarget.style.filter = 'brightness(1.08)')
                    }
                    onMouseOut={(e) => (e.currentTarget.style.filter = 'none')}
                  >
                    登录
                  </Button>
                ),
              }}
            >
              <div
                style={{
                  width: '100%',
                  margin: '0 auto',
                  fontFamily: mainFont,
                }}
              >
                <ProFormText
                  name="username"
                  fieldProps={{
                    size: 'large',
                    prefix: (
                      <UserOutlined
                        style={{ color: '#1a73e8', fontSize: 18 }}
                      />
                    ),
                    placeholder: '请输入用户名',
                    style: {
                      borderRadius: 8,
                      borderColor: '#dadce0',
                      boxShadow: '0 1px 4px #e3f2fd',
                      transition: 'border-color 0.2s, box-shadow 0.2s',
                      fontSize: 17,
                      fontFamily: mainFont,
                    },
                    onFocus: (e) => (e.target.style.borderColor = '#1976d2'),
                    onBlur: (e) => (e.target.style.borderColor = '#dadce0'),
                  }}
                  rules={[{ required: true, message: '请输入用户名' }]}
                  placeholder="请输入用户名"
                />
                <ProFormText.Password
                  name="password"
                  fieldProps={{
                    size: 'large',
                    prefix: (
                      <LockOutlined
                        style={{ color: '#1a73e8', fontSize: 18 }}
                      />
                    ),
                    placeholder: '请输入密码',
                    style: {
                      borderRadius: 8,
                      borderColor: '#dadce0',
                      boxShadow: '0 1px 4px #e3f2fd',
                      transition: 'border-color 0.2s, box-shadow 0.2s',
                      fontSize: 17,
                      fontFamily: mainFont,
                    },
                    onFocus: (e) => (e.target.style.borderColor = '#1976d2'),
                    onBlur: (e) => (e.target.style.borderColor = '#dadce0'),
                  }}
                  rules={[{ required: true, message: '请输入密码' }]}
                  placeholder="请输入密码"
                />
                <div style={{ marginBlockEnd: 24 }} />
              </div>
            </LoginForm>
          </div>
        </div>
        {/* 响应式样式 */}
        <style>{`
          @media (max-width: 768px) {
            .login-card {
              flex-direction: column !important;
              width: 98vw !important;
              min-width: 0 !important;
              min-height: unset !important;
              border-radius: 16px !important;
              box-shadow: 0 4px 16px 0 rgba(21,101,192,0.10) !important;
            }
            .login-welcome {
              border-right: none !important;
              border-bottom: 1px solid #e3eaf2 !important;
              padding: 28px 10vw 18px 10vw !important;
              min-height: 120px !important;
            }
            .login-form-side {
              padding: 24px 6vw 24px 6vw !important;
            }
            .login-bg-svg-1 {
              width: 180px !important;
              height: 180px !important;
            }
            .login-bg-svg-2 {
              width: 120px !important;
              height: 120px !important;
            }
            .login-welcome-ellipse {
              width: 60px !important;
              height: 30px !important;
              left: 2vw !important;
              bottom: 2vw !important;
            }
            .ant-pro-form-login-container, .ant-pro-form-login-page {
              padding: 0 !important;
            }
            .ant-pro-form-login-page .ant-pro-form-login-main {
              box-shadow: none !important;
            }
            .ant-input, .ant-input-password {
              font-size: 15px !important;
            }
            .ant-btn {
              font-size: 16px !important;
              height: 40px !important;
              border-radius: 18px !important;
            }
          }
          @media (max-width: 480px) {
            .login-card {
              width: 100vw !important;
              border-radius: 0 !important;
            }
            .login-welcome {
              padding: 18px 4vw 10px 4vw !important;
            }
            .login-form-side {
              padding: 12px 2vw 18px 2vw !important;
            }
            .login-bg-svg-1, .login-bg-svg-2 {
              display: none !important;
            }
          }
        `}</style>
      </div>
    </ProConfigProvider>
  );
}
